<template>
  <div
    class="container"
    @click="turnRoute"
    @mouseover="mouseOver"
    @mouseout="mouseOut"
  >
    <div class="fixedToTop">
      <CommonTitle><p slot="title">学员信息</p></CommonTitle>
      <!-- <div class="tableBox"> -->
      <el-table :data="[]" style="width: 100%; z-index: 1000">
        <el-table-column label="顺序" width="80px"> </el-table-column>
        <el-table-column label="姓名" width="80px"> </el-table-column>
        <el-table-column label="手机" width="180px"> </el-table-column>
        <el-table-column label="消费金额" width="100px"> </el-table-column>
        <el-table-column label="会员等级" width="100px"> </el-table-column>
      </el-table>
    </div>
    <el-table
      :data="showList"
      style="width: 100%"
      class="tablebody"
      :class="{ anim: myanimate == true }"
      :show-header="false"
    >
      <el-table-column width="80px">
        <template slot-scope="scope"
          ><div :class="{ dis: (isdis = scope.row.rank <= 3 ? false : true) }">
            {{ scope.row.rank }}
          </div></template
        >
      </el-table-column>
      <el-table-column prop="name" width="80px"> </el-table-column>
      <el-table-column prop="phone" width="180px"> </el-table-column>
      <el-table-column prop="spend" width="100px"> </el-table-column>
      <el-table-column prop="level" width="100px"> </el-table-column>
    </el-table>
    <!-- </div> -->
  </div>
</template>

<script>
import CommonTitle from "./CommonTitle";
export default {
  components: {
    CommonTitle,
  },
  props: ["studentDate"],
  data() {
    return {
      showList: [],
      myanimate: Boolean,
      isdis: true,
      // tableData: [
      //   {
      //     rank: 1,
      //     name: "王小虎",
      //     phone: "12345678910",
      //     spend: "2366.00",
      //     level: 3,
      //   },
    };
  },
  mounted() {
    this.timer = setInterval(this.scroll, 2000);
  },
  watch: {
    studentDate(newV, oldV) {
      var arr = JSON.parse(JSON.stringify(newV));
      arr.forEach((item, index) => {
        var str = item.phone;
        item.phone = str.slice(0, 3) + "****" + str.slice(str.length - 4);
      });
      this.showList = arr;
      // console.log(this.showList, newV);
    },
  },
  methods: {
    scroll() {
      this.myanimate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.showList.push(this.showList[0]); // 将数组的第一个元素添加到数组的最后
        this.showList.shift(); //删除数组的第一个元素
        this.myanimate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    mouseOver() {
      // console.log("鼠标悬停");
      // this.myanimate = false;
      clearInterval(this.timer);
    },
    mouseOut() {
      // this.myanimate = true;
      this.timer = setInterval(this.scroll, 2000);
    },
    turnRoute() {
      this.$alert("点击确定转跳学员管理界面", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.$router.push("/layout/student");
          } else {
            return;
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding: 24px;
  padding-top: 0;
  height: 100%;
  overflow-y: scroll;
  position: relative;
  background-color: #fff;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  & {
    -ms-overflow-style: none;
  }
  & {
    overflow: -moz-scrollbars-none;
  }

  // h3 {
  //   margin-top: 0;
  // }
  &:hover h3 {
    color: #438afe;
  }
  .anim {
    transition: all 1s;
    margin-top: -42px;
  }

  .fixedToTop {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2000;
    background-color: #fff;
    padding-top: 24px;
  }

  .tablebody {
    padding-top: 0px;
  }
  // .tableBox {
  //   box-sizing: border-box;
  //   padding: 0 20px;

  //把暂无数据的显示去掉
  /deep/.el-table__empty-block {
    display: none !important;
  }

  /deep/.el-table__row {
    height: 42px;
  }
  /deep/.cell {
    text-align: center;
  }
  /deep/.el-table__header-wrapper .cell {
    font-size: 16px;
    font-family: "微软雅黑";
    font-weight: bold;
    color: #333333;
  }
  /deep/.el-table__body-wrapper {
    font-size: 14px;
    font-family: "微软雅黑";
    color: #333333;
  }
  .dis {
    background-color: #fff;
    color: #333333;
  }
  /deep/.el-table__row:nth-child(1) .el-table__cell:nth-child(1) .cell {
    padding: 0;
    margin: 0 28px;
    background-color: #ec6941;
    border-radius: 50%;
    color: #fff;
  }
  /deep/.el-table__row:nth-child(2) .el-table__cell:nth-child(1) .cell {
    padding: 0;
    margin: 0 28px;
    background-color: #f19149;
    border-radius: 50%;
    color: #fff;
  }
  /deep/.el-table__row:nth-child(3) .el-table__cell:nth-child(1) .cell {
    padding: 0;
    margin: 0 28px;
    background-color: #f8b551;
    border-radius: 50%;
    color: #fff;
  }
  /deep/.el-table__row .el-table__cell:nth-child(1) .dis {
    transition: 0.3s;
  }
  /deep/.el-table__row:hover .el-table__cell:nth-child(1) .dis {
    background-color: #f5f7fa !important;
  }
  // }
}
</style>